<script>
import { defineComponent, reactive, toRefs, onMounted, watch } from "vue";
import { CirclePlus } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";

export default defineComponent({
  name: "SideMenu",
  props: {
    navList: {
      type: Array,
      default: () => {
        return [
          {
            title: "本地",
            redirect: "/allocation/local",
          },
          {
            title: "系统",
            redirect: "/allocation/system",
          },
          {
            title: "网络",
            redirect: "/allocation/network",
          },
          {
            title: "图像",
            redirect: "/allocation/image",
          },
          {
            title: "存储",
            redirect: "/allocation/oss",
          },
        ];
      },
    },
    defaultIndex: {
      type: Number,
      default: 0,
    },
  },
  components: {
    CirclePlus,
  },
  setup(props, { emit }) {
    const state = reactive({
      current: -1,
    });

    const router = useRouter();
    const route = useRoute();

    watch(
      () => route.query,
      (a) => {
        if (a.index === "3") {
          state.current = 1;
        }
      },
      {
        immediate: true,
      }
    );

    onMounted(() => {
      state.current = route.meta["sideCurrent"] || props.defaultIndex;
      handleNavClick(state.current);
    });

    const handleNavClick = (index) => {
      state.current = index;
      router.push(props.navList[state.current]["redirect"]);
    };

    return {
      ...toRefs(state),
      handleNavClick,
    };
  },
});
</script>

<template>
  <div class="component-side-menu-container">
    <div
      class="side-menu-item"
      v-for="(item, index) in navList"
      :key="index"
      :class="current === index ? 'active' : ''"
      @click="handleNavClick(index)"
    >
      <!-- <circle-plus class="item-icon" /> -->
      <span :class="'icon' + index" class="icon"></span>
      <span class="item-title">{{ item["title"] }}</span>
    </div>
  </div>
</template>

<style lang="scss">
.component-side-menu-container {
  height: 100%;
  background-color: #e6e6e6;
  padding-top: 20px;
  .side-menu-item {
    display: flex;
    align-items: center;
    height: 32px;
    padding-left: 30px;
    user-select: none;
    cursor: pointer;
    margin-top: 10px;
    .item-icon {
      width: 24px;
      height: 24px;
    }
    .item-title {
      font-size: 16px;
      margin-left: 10px;
    }
    &:first-child {
      margin-top: 0;
    }
    &.active {
      background-color: #74bcff;
      color: #fff;

      .icon0 {
        background-image: url("../assets/components/loc-white.png");
      }

      .icon1 {
        background-image: url("../assets/components/sys-white.png");
      }

      .icon2 {
        background-image: url("../assets/components/net-white.png");
      }

      .icon3 {
        background-image: url("../assets/components/pic-white.png");
      }

      .icon4 {
        background-image: url("../assets/components/save-white.png");
      }
    }

    .icon {
      width: 15px;
      height: 15px;
      display: inline-block;

      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      margin-top: 3px;
    }

    .icon0 {
      background-image: url("../assets/components/loc-black.png");
    }

    .icon1 {
      background-image: url("../assets/components/sys-black.png");
    }

    .icon2 {
      background-image: url("../assets/components/net-black.png");
    }

    .icon3 {
      background-image: url("../assets/components/pic-black.png");
    }

    .icon4 {
      background-image: url("../assets/components/save-black.png");
    }
  }
}
</style>
